<template>
  <div class="show-shop-product">
    <div class="title">添加产品测试表</div>
    <div class="content" v-loading="loading">
      <div class="item">
        <label for="" class="desc">县编号：</label>
        <span class="text">{{provinceName}}</span>
        <span class="text">{{cityName}}</span>
        <span class="text">{{districtName}}</span>
      </div>
      <div class="item">
        <label for="" class="desc">产品类型：</label>
        <span class="text">{{productData.productType}}</span>
      </div>
      <div class='item'>
        <label class='desc' for='inregral'>赠送积分：</label>
        <span class="text">{{productData.inregral}}</span>
      </div>
      <div class='item'>
        <label class='desc' for='inregral'>名称：</label>
        <span class="text">{{productData.name}}</span>
      </div>
      <div class='item'>
        <label class='desc' for='info'>说明：</label>
        <span class="text">{{productData.info}}</span>
      </div>
      <div class='item'>
        <label class='desc' for='info'>选择日期：</label>
        <span class="text">{{productData.inputTime}}</span>
      </div>
      <div class='btn-group'>
        <el-button type='primary' @click="goBack">返 回</el-button>
      </div>
    </div>
  </div>
</template>>

<script>
import $ from 'jquery'
export default {
  data() {
    return {
      loading: true,
      productData: {},
      districtName: '',
      cityName: '',
      provinceName: ''
    }
  },
  created() {
    setTimeout(() => {
      this.getData()
    }, 20)
  },
  // 路由跳转时，获取页面数据
  watch: {
    '$route'(to, from) {
      this.getData()
    }
  },
  methods: {
    // 获取页面数据
    getData() {
      let id = this.$route.params.productTestId
      if (id) {
       // 根据路由参数param，获取当前页面数据
        $.post('/basis/productTest.do?method=select', { param: JSON.stringify({ condition: 'productTestId= ' + id }) }).then((res) => {
          if (this.$route.path === `/basic/productTest/show/${id}`) {
            this.productData = res.map
            // 页面展示前，渲染数据
            $.post('/basis/district.do?method=select', { param: JSON.stringify({ condition: 'districtId= ' + res.map.districtId }) }).then((res) => {
              this.districtName = res.map.districtName
              $.post('/basis/city.do?method=select', { param: JSON.stringify({ condition: 'cityId= ' + res.map.cityId }) }).then((res) => {
                this.cityName = res.map.cityName
                $.post('/basis/province.do?method=select', { param: JSON.stringify({ condition: 'provinceId= ' + res.map.provinceId }) }).then((res) => {
                  this.provinceName = res.map.provinceName
                  this.loading = false
                })
              })
            })
          }
        })
      }
    },
    // 回到查询页
    goBack() {
      this.$router.push('/basic/productTest/query')
    }
  }
}
</script>

<style lang="stylus" type="text/stylus" rel="stylesheet/stylus">
  .show-shop-product
    position: relative
    width 1000px
    margin: 20px auto 0
    border 1px solid rgba(0, 0, 0, .2)
    .title
      width: 100%
      line-height: 50px
      height: 50px
      text-indent: 20px
      background: #f3f5f7
      font-weight: 700
    .content
      font-size: 14px
      padding 20px
      .item
        height 36px
        line-height 36px
        margin-bottom 20px
      .btn-group
        padding 20px 0 0 20px
        button
          display: inline-block
          margin-right: 10px
</style>
